<template>
	<view class="Product bac_f8f8f8">
		<view class="swperS">
			<u-swiper :list="shopping.files" height="500rpx" @change="change" @click="swiperClick"></u-swiper>
			<view class="swper_num">
				<text>{{index_swper}}/</text>
				<text>{{index_lenght}}</text>
			</view>
		</view>
		<view class="Product_title bac_ffffff">
			<view class="Product_price">
				<view class="price_left">
					<text class="size_40">{{shopping.price}}</text>
					<text style="font-size: 24rpx;">积分</text>
				</view>
				<view class="price_right color_666">{{shopping.or_price}}<text style="font-size: 24rpx;">积分</text></view>
			</view>
			<view class="Product_text">
				<view>{{shopping.title}}</view>
				<view>
					<!-- <u-icon name="share-square" labelColor="#111" size="60rpx" @click="share()"></u-icon> -->
				</view>
			</view>
			<view class="Product_describe color_666 size_26">{{shopping.describe}}</view>
			<view class="Product_num display_space size_26 color_666">
				<text>库存:{{Specification}}{{ numberUnit }}</text>
				<text>销量:{{shopping.volume}}{{ numberUnit }}</text>
			</view>
		</view>
		<view class="service bac_ffffff" v-if="setList.length">
			<view class="service_list size_26 display_between color_666" @click="open">
				<view class="list_left">
					<text>已选</text>
					<text>{{name}}</text>
					<text>{{guiG}}{{ numberUnit }}</text>
				</view>
				<u-icon name="arrow-right" size="35rpx"></u-icon>
			</view>
			<!-- <view class="service_list size_26 display_between">
				<view class="list_left">
					<text>服务</text>
					<text>其他字段</text>
				</view>
				<u-icon name="arrow-right" size="35rpx"></u-icon>
				<text></text>
			</view> -->
		</view>
		<view class="details">
			<view class="details_title">
				商品详情
			</view>
			<!-- <view class="details_content" v-html="shopping.text"></view> -->
            <mp-html class="details_content"  :content="shopping.text" :domain="Resource_url"  
            
                :tag-style="{
                    img: 'max-width: 650rpx',
                    image: 'max-width: 650rpx',
                }" 
            />
		</view>
		<view class="Product_but bac_ffffff display_center">
			<!-- <u-icon name="server-fill" size="30" color="#B29062" @click="$u.vuex.dispatch('user/makePhoneCallServer')"></u-icon> -->
			<view class="but but_B29062 display_center" @click="shoppBut">立即购买</view>
		</view>
		<Modules :shopping="shopping" :ModulesState="ModulesState" :setList="setList" @setNumber="setNumber" :images="shopping.files[0]"
			@open="open" @close="close"></Modules>
        <shoppPosterPopup ref="PosterPopup"></shoppPosterPopup>
        <!-- <HomeNavBtn></HomeNavBtn> -->
	</view>
</template>

<script>

    import {
        integral_product_id,
        integral_specification_id
    } from "@/api/useryk.js"
    import {Resource_url, Http_url} from "@/config/config.js"
	//引入数字组件
	import Modules from "@/components/Model_Num/Model_Num.vue"
    import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	//引入请求接口
	// import commodity from "@/libs/api/commodity.js"
	export default {
		data() {
			return {
                Resource_url,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				index_lenght: 0,
				index_swper: 0,
				ModulesState: false,
				shopping: {
                    files: []
                },
				Specification: 0,
				// userId: 1,
				setList: [],
				setNum: {
					user_id: 0,
					value: 1
				},
				name: '',
				guiG: 1
			}
		},
		onLoad(a) {
			this.setNum.userId = a.id
		},
        computed: {
            numberUnit(){
                return this.shopping.unit || ''
            }
        },
		onShow() {
			this.setCommodity()
			this.setSpecification()
        },
		methods: {
            share(){
                this.$refs['PosterPopup'].open({
                    image: this.shopping.files[0],
                    // image: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
                    title: this.shopping.title,
                    originPrice: this.shopping.or_price,
                    pricePrefix: '',
                    priceSuffix: '积分',
                    
                    originPricePrefix: '',
                    originPriceSuffix: '积分',
                    price: this.shopping.price,
                    // #ifdef H5
                    qrcode: window.location.href
                    // #endif
                })
            },
			change(a) {
				// console.log(a, 'aaa');
				this.index_swper = a.current + 1
			},

			//根据商品id获取商品信息
			setCommodity() {
				integral_product_id({
					id: this.setNum.userId
				}).then(res => {
					console.log(res, 'res=sss');
					this.shopping = {
						...res.data,
						files: !res.data.files_lun ? [] : res.data.files_lun.split(',').map(item => {
							return Resource_url + item
						})
					}
					// this.$u.vuex.set('user.interData', this.shopping)
					this.index_lenght = this.shopping.files.length
					if(this.index_lenght) this.index_swper = 1
				})
			},

			//根据商品接口获取商品库存
			setSpecification() {
				integral_specification_id({
					spid: this.setNum.userId
				}).then(res => {
					console.log(res, 'setInventory');
					this.setList = res.data
                    if(this.setList.length){
                        this.name = this.setList[0].title
                        this.setNum.typeID = res.data[0].id
                        this.setNum.text = res.data[0].title
                    }
					
					this.Specification = res.data.reduce((item1, item2) => {
						// console.log(item1,item2,'item1,item2');
						return item1 + item2.sum
					}, 0)
					console.log(this.Specification, 'this.Specification');
				})
			},
			//打开弹窗
			open() {
				this.ModulesState = true
			},
			//关闭弹窗
			close() {
				this.ModulesState = false
			},
			//跳转确认订单页面
			shoppBut() {
				// this.$u.vuex.set('user.shop', this.setNum)

                this.$store.commit('setShopData', this.setNum)
				// console.log(this.setNum,'this.setNum');
				// uni.navigateTo({
				// 	url: `/pages/user/ConfirmOrder/ConfirmOrder?id=${JSON.stringify(this.setNum)}`
				// });
                
                if( this.setNum.typeID){
                    this.$u.route('/pages/integral/order', {
                        id: this.setNum.userId, 
                        spid:  this.setNum.typeID, 
                        spidname: this.setNum.text, 
                        num: this.guiG,
                    })
                }else {
                    this.$u.toast('未选择规格')
                }
                
				
			},
			//获取弹窗选择的数据
			setNumber(a) {
				console.log(a, 'aasss111');
				this.name = a.text
				this.guiG = a.value
				this.setNum = {
					...this.setNum,
					...a
				}
				// this.setNum={...this.setNum,...a}
				console.log(this.setNum, 'this.setNum');
			},
            swiperClick(e){
                console.log(e)
                
                uni.previewImage({
                    urls: this.shopping.files,
                    current: e
                })
            }

		},
		components: {
			Modules,
            mpHtml
		}
	}
</script>

<style scoped lang="scss">
    @import '@/libs/PublicStyle.scss';
	@import "./integral.scss";
</style>